<template>
  <div>
    <el-card class="card">
      <div style="margin-bottom: 20px;"><el-text tag="b" style="font-size: 20px;">我的课表</el-text></div>
      <div style="margin-top: 30px;border-bottom: 1px solid var(--el-border-color);margin-bottom: 30px;"></div>
      <el-table :data="theWeekClassTable"  border style="width: 100%">
        <el-table-column prop="monday" label="星期一"  />
        <el-table-column prop="tuesday" label="星期二"  />
        <el-table-column prop="wednesday" label="星期三"  />
        <el-table-column  prop="Thursday" label="星期四" >
          <template #default="scope"><div style="height:70px;display: flex; align-items: center;">{{ scope.row.thursday }}</div></template>
        </el-table-column>
        <el-table-column prop="friday" label="星期五" />
        <el-table-column prop="saturday" label="星期六" />
        <el-table-column prop="sunday" label="星期日"  />
      </el-table>
      <div class="week">
        <el-icon class="direct-icon" @click="lastWeek"><ArrowLeft /></el-icon>
        <el-button type="warning"  circle style="font-size: 18px;width:70px;height:70px;margin-left: 10px;margin-right: 10px;">{{ weekNum }} 周</el-button>
        <el-icon class="direct-icon" @click="nextWeek"><ArrowRight /></el-icon>
      </div>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { TableByDetailTime } from "@/api/student/type";
import {checkMyClassTable} from "@/api/student";

const weekNum = ref(3)
const theWeekClassTable = ref<TableByDetailTime[]>()
onMounted(async() => {
  await getTheWeekClassTable()
})
const getTheWeekClassTable = async() => {
  try {
    const { data } = await checkMyClassTable(weekNum.value)
    console.log(data)
    theWeekClassTable.value = data
  } catch(error) {
    await Promise.reject(error)
  }
}
const lastWeek = async() => {
  if(weekNum.value > 1)
  {
    weekNum.value = weekNum.value -1
    await getTheWeekClassTable()
  }
}
const nextWeek = async() => {
  if(weekNum.value < 20)
  {
    weekNum.value = weekNum.value +1
    await getTheWeekClassTable()
  }
}
</script>

<style scoped>
.card {
  padding:20px;
  margin: 0 auto;
  margin-top: 3%;
  width:70%;
  min-height:600px;
  height:90%;
}
.week {
  display: flex;
  align-items: center;
  margin-top: 20px;
  float: right;
  margin-right: 30px;
}
.direct-icon {
  font-size: 20px;
  background-color:#409EFF;
  color:white;
  border-radius: 50%;
  padding:10px;
  cursor: pointer;
}
</style>
